<template>
    <div class="top" :style="{backgroundImage: 'url(' + require('@/assets/image57.png') + ')',backgroundSize:'cover',backgroundPosition:'center'}">
       
       <div class="topcontain">
           <div class="firsttop">
               <svg class="icon" aria-hidden="true" @click="gotolastpage">
         <use xlink:href="#icon-xiangzuojiantou"></use>
   </svg>
           </div>
           <div class="first">
               <span>专业陪护-服务内容</span>
           </div>
           <div class="scendtop">
               <img src="/image62.png" alt="">
               <span>科学、专业</span>
           </div>
           <div class="thirdtop">
               <img src="/image63.png" alt="">
               <span>个性化</span>
           </div>
       </div>
   </div>
   <div class="contanbox">
       <div class="items">制定个性化康复训练</div>
       <div class="items">进行专业医疗指导</div>
       <div class="items">帮助患者静脉注射、更换尿管等</div>
       <div class="items">帮助患者进行相对复杂的医疗操作</div>
       <div class="items">具备高情商和应对复杂情况的能力</div>
   </div>
   <div class="footerbutton" @click="gotomajorlist">立即预约</div>
</template>
<script>
export default{
   methods:{
       gotolastpage(){
           this.$router.go(-1);
       },
       gotomajorlist(){
           this.$router.push('majorlist')
       }
   }
}
</script>
<style scoped>
.top{
   position: relative;
   width: 7.88rem;
   height: 5.12rem;
   
}
.firsttop{
   position: absolute;
   top: 0.6rem;
   margin-left: 10px;
  
}
.firsttop span{
   margin-left:2.6rem;
   font-size: 24px;
   color: #ffffff;
   /* font-weight: bold; */


}
.first{
   width: 351px;
   height: 53px;
   background-image: linear-gradient(to right,rgb(255,235,59),rgb(67,207,124));
  position: absolute;
  top: 140px;
  left: 40px;
   display: flex;
   align-items: center;
   border-radius: 10px;
   font-size: 24px;
   color: #fff;
   padding-left: 60px;
}

.scendtop{
   width: 3.2rem;
   height: .7rem;
   background-image: linear-gradient(to right,rgb(255,235,59),rgb(67,207,124));
  position: absolute;
  top: 220px;
  left: 30px;
   display: flex;
   align-items: center;
   border-radius: 10px;
   
   
}
.scendtop span{
   margin-left: 10px;
   font-size:24px ;
   color: #ffffff;
}
.scendtop img{
   margin-left: 10px;
   width: 28px;
   height: 28px;
}
.thirdtop{
   width:180px ;
   height: .7rem;
   background-image: linear-gradient(to right,rgb(186,214,63),rgb(67,207,124));
  position: absolute;
  top: 220px;
  left: 230px;
   display: flex;
   align-items: center;
   border-radius: 10px;
}
.thirdtop span{
   margin-left: 10px;
   font-size:24px ;
   color: #ffffff;
}
.thirdtop img{
   margin-left: 10px;
   width: 28px;
   height: 28px;
}
.photo{
   margin-left: 10px;
   width: 78px;
   height: 77px;
   display: inline-block;
   border-radius: 10px;
}
.photo img{
   width: 64px;
   height: 64px;
}
.servemoney{
   position: absolute;
   top: 50px;
   left: 100px;
   color: #00BAAD;
   
}
.contanbox{
   width: 367px;
   height: 348px;
   /* background-color: #00BAAD; */
   margin-top: 20px;
  margin-left: 35px;
  box-shadow: 0 0 10px #888;
  border-radius: 10px;
}
.items{
   font-size: 20px;
   width: 367px;
  padding-top: 38px;
 padding-bottom: 5px;
  border-bottom: 1px solid rgb(0,186,173) ;
}
.footerbutton{
   position: absolute;
   bottom:70px;
   left: 70px;
   width: 4.8rem;
   height: 1.16rem;
   background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
   border-radius: 30px /30px;
   text-align: center;
   line-height: 1.16rem;
   font-size:.6rem;
   color: #fff;

}
</style>